import { View, Text } from '@tarojs/components'
import React, { useState } from 'react'
import Taro from '@tarojs/taro'
import './index.scss'

const CustomTabBar = () => {
  const [selected, setSelected] = useState(0)

  const tabs = [
    { icon: 'house', text: '首页', path: '/pages/home/index' },
    { icon: 'shuffle', text: '随机', path: '/pages/random/index' },
    { icon: 'sliders', text: '筛选', path: '/pages/filter/index' },
    { icon: 'heart', text: '收藏', path: '/pages/favorites/index' },
    { icon: 'user', text: '我的', path: '/pages/profile/index' }
  ]

  const handleClick = (index, path) => {
    setSelected(index)
    Taro.switchTab({
      url: path
    })
  }

  return (
    <View className='tab-bar'>
      {tabs.map((tab, index) => (
        <View
          key={tab.path}
          className={`tab-bar__item ${selected === index ? 'tab-bar__item--active' : ''}`}
          onClick={() => handleClick(index, tab.path)}
        >
          <Text className={`fa-solid fa-${tab.icon} tab-bar__icon`} />
          <Text className='tab-bar__text'>{tab.text}</Text>
        </View>
      ))}
    </View>
  )
}

export default CustomTabBar 